<template>
    <div>
      <div style="width: 1265px; height: 50px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <span style="margin-left: 50px;">编号：</span>
        <el-input placeholder="商铺完整编号" class="downtownNameClass" v-model="inputName"></el-input>
        <span style="margin-left: 10px;">使用状态：</span>
        <el-select v-model="inputState" placeholder="请选择" size="medium" class="downtownNumClass">
            <el-option :key="0" label="已出售" value="selled"></el-option>
            <el-option :key="1" label="已出租" value="rented"></el-option>
            <el-option :key="2" label="空置" value="empty"></el-option>
        </el-select>
      
        <el-button type="primary" class="searchClass" icon="el-icon-search" @click="search">查询</el-button>
        <el-button id="resetId" icon="el-icon-refresh-right" @click="reset">重置</el-button>
      </div>
      <div class="tableClass" style=" width: 1265px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <div class="addButtonClass" style="width: 1265px; height: 20px;">
          <el-button type="primary" id="addId" icon="el-icon-plus" @click="addHouse">新增</el-button>
          <el-button type="primary" id="addId" icon="el-icon-upload2" @click="fileDialog">导入</el-button>
          <el-button icon="el-icon-refresh" circle id="refreshId" @click="refresh"></el-button>
          </div>
      <br/>
      <div class="table-div" style="width: 1265px;">
        <el-table
          :data="tableData"
          stripe
          :border="true"
          style="width: 100%"
          :header-cell-style="{
            background: '#1890ff',
            color: '#ffffff',
            border: '1px #ffffff solid',
            'text-align': 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column label="序号" type="index" :index="(this.pageNum-1)*this.pageSize+1"></el-table-column>
          <el-table-column prop="name" label="完整编号"> </el-table-column>
          <el-table-column prop="block" label="商铺区"></el-table-column>
          <el-table-column prop="building" label="楼栋"></el-table-column>
          <el-table-column prop="floor" label="楼层" ></el-table-column>
          <el-table-column prop="code" label="房号"></el-table-column>
          <el-table-column prop="buildingSquare" label="占地面积"></el-table-column>
          <el-table-column prop="useSquare" label="使用面积"></el-table-column>
          <el-table-column prop="rentFee" label="租金"></el-table-column>
          <el-table-column prop="state" label="使用状态"></el-table-column>
          <el-table-column label="操作" min-width="115%">
              <template slot-scope="scope">
                  <el-button type="primary" class="el-icon-edit" plain size="small" @click="updateHouse(scope.row,scope.$index)">修改</el-button>
                  <el-button type="danger" class="el-icon-delete" plain size="small"  @click="deleteHouse($event,scope.$index)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <div style="height: 50px;"></div>
        <!-- 页脚 -->
        <!-- 
          1.@size-change事件监听,当分页(每页显示条数)发生变化时触发的事件
          2.@current-change事件监听,当前页数发生变化时出发的事件
          3.current-page当前页:从后端服务器中去获取
          4.page-sizes:设置可供用户选择的分页(每页显示条数)大小选项
          5.page-size:将当前的分页大小绑定到名为 pageSize 的变量上。不绑定的话默认是10条数据,这个变量决定每页显示的数据条数
          7.pager数据需要多少页去展示,自动根据total/pageSize
          
         -->
         <div class="pageHepler">
              <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
              :current-page="pageNum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              >
              </el-pagination>
          </div>
  
      </div><!---表单的div-->
      <div>
          <el-dialog title="新增商铺" :visible.sync="dialogFormVisible">
              <template slot="title">
                  <div style="font-size:25px;color:black;font-weight: bold;">{{updateHouseTitle}}</div>
              </template>
              <el-form>
                  
                  <div class="blockAndBuildingClass">
                    <span style="color:rgb(223, 100, 100);font-size:21px;font-weight: bold;">*</span>
                    <span class="demonstration" style="font-size: 20px; font-weight: bold;"> 楼 栋</span>
                    <el-cascader required
                        style="width:65%; margin-left: 32px;"
                        ref="locationCascader"
                        v-model="blockAndBuilding"
                        :options="options"
                        @change="handleChange"
                        >
                    </el-cascader>
                  </div>
                  <el-form-item label="  房    号" required style="margin-top: 20px;">    
                      <el-input v-model="form.code" style="width:400px;  margin-left: 20px;" placeholder="请输入房号" :maxlength=20 show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="  楼    层" required>    
                      <el-input v-model="form.floor" style="width:400px; margin-left: 20px;"  placeholder="请输入楼层" :maxlength=100 show-word-limit :rows="1"></el-input>
                  </el-form-item>
                  <el-form-item label="占地面积" required>    
                      <el-input v-model="form.buildingSquare" style="width:400px;"  placeholder="请输入占地面积" :maxlength=100 show-word-limit :rows="1"></el-input>
                  </el-form-item>
                  <el-form-item label="使用面积" required>    
                      <el-input v-model="form.useSquare" style="width:400px;"  placeholder="请输入使用面积" :maxlength=100 show-word-limit :rows="1"></el-input>
                  </el-form-item>
                  <el-form-item label=" 租 金" style="margin-left: 25px;">    
                      <el-input v-model="form.rentFee" style="width:400px; margin-left: 20px;"  placeholder="请输入租金" :maxlength=100 show-word-limit :rows="1"></el-input>
                  </el-form-item>
                  <el-form-item label="使用状态" required>    
                    <el-select v-model="form.state" placeholder="请选择使用状态" size="medium" class="downtownNumClass" style="width: 400px;">
                    <el-option :key="0" label="已出售" value="selled"></el-option>
                    <el-option :key="1" label="已出租" value="rented"></el-option>
                    <el-option :key="2" label="空置" value="empty"></el-option>
                </el-select>
                  </el-form-item>
                  <el-form-item label=" 备 注" style="margin-left: 30px;">    
                      <el-input v-model="form.remark" style="width:400px; margin-left: 15px;" type="textarea" resize="none" placeholder="请输入" :maxlength=100 show-word-limit :rows="2"></el-input>
                  </el-form-item>
                  
              </el-form>
              <div slot="footer" class="dialog-footer" style="margin-right: 50px;">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
          </el-dialog>
      </div>
    <!-- 导入文件的弹窗 -->
    <div>
        <el-dialog title="批量导入" :visible.sync="fileDialogVisible">
            <div style="margin-left: 150px;">
                <el-steps :active="active" finish-status="success" style="width: 500px;">
                    <el-step title="上传文件"></el-step>
                    <el-step title="导入结果"></el-step>
                </el-steps>
            </div>
            <div v-if="displayUploadFileDialog">
                <div style="display:flex; border-color: rgb(233, 230, 230); border-width: 1px;border-style: solid; margin-top: 40px;">
                    <el-upload
                        class="upload-demo"
                        style="display: flex;"
                        drag
                        :multiple="true"
                        :on-success="onFileUploadSuccess"
                        :before-upload="beforeFileUpload"
                        :http-request="handleExcel"
                        >
                        <!-- <i src="../../assets/images/upload.png" style="margin-top: 0px;"></i> -->
                        <img src="../../assets/images/upload.png" style="width: 80px; height: 70px;">
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip" style="margin-left: 10px;">
                            <div class="el-upload__tip" slot="tip" style="color: black; font-size: bold; font-size: 15px;">上传填好的数据表</div>
                            <div class="el-upload__tip" slot="tip">文件后缀名必须是xls或xlsx</div>
                            <div class="el-upload__tip" slot="tip">文件大小不超过500KB，最多支持导入1000条数据</div>
                        </div>
                    </el-upload>
                </div>
                <div style="display:flex; border-color: rgb(233, 230, 230); border-width: 1px;border-style: solid;margin-top: 30px;">
                        <div style=" width: 180px; text-align: center;border-width: 1px;border-style:dotted;">
                            <div><img src="../../assets/images/import.png" style="width: 80px; height: 70px;"></div>
                            <div><a href="http://localhost:8080/house/downloadTemplate" style="text-decoration: none; color: rgba(0, 94, 255, 0.788);">下载模板（商铺）</a></div>
                        </div>
                    
                        <div class="el-upload__tip" slot="tip" style="margin-left: 12px;">
                            <div class="el-upload__tip" slot="tip" style="color: black; font-size: bold; font-size: 15px;">填写导入数据信息</div>
                            <div class="el-upload__tip" slot="tip">请按照数据模板的格式准备导入数据</div>
                            <div class="el-upload__tip" slot="tip">模板中的表头名称不可更改，表头行不能删除</div>
                        </div>
                </div>
                <div style="margin-top: 40px; margin-left: 520px;">
                    <el-button  @click="cancel">取消</el-button>
                    <el-button style="margin-left: 30px;" @click="next" type="primary">下一步</el-button>
                </div>
            </div>
            <div v-if="success" style="width: 500px; height: 300px; text-align: center;">
                <div style="margin-left: 220px; margin-top: 80px;">
                    <img src="../../assets/images/success.png" style="width: 80px; height: 80px;">
                    <br>
                    <br>
                    <span style="font-size: 20px; font-weight: bolder;">批量导入成功</span>
                    <br>
                    <br>
                    <span>您已导入数据</span>
                </div>
                <el-button type="primary" style="margin-top: 60px; margin-left: 600px;" @click="closeSuccess">关闭</el-button>
            </div>
        </el-dialog>
    </div>
    


    </div>
      </div>
     
  </template>
  
  <script>
import { Upload } from 'element-ui';

  export default {
      data() {
          return {
            displayUploadFileDialog:true,
            success:false,
            blockAndBuilding:"",//二级联动获取的对应的值
              options:[],
              formData:{},
              active: 0,
              code:"",
              fileDialogVisible:false,
              editCascaderVisible:"",
              blockAndBuildingUpdate:"",
              operateFlag:1,//1代表添加2代表修改
              updateHouseTitle:"新增商铺",
              dialogFormVisible:false,
              tableData:[],//商铺表单数据
              listBlocks:"",//街道列表
              listBuildings:"",//楼栋列表
              pageNum:"",
              pageSize:"",
              total:"",
              inputState:"",//输入查询的状态
              inputName:"",//输入商铺的完整编号
              form:{
                number:"",
                 id:"",//商铺id
                 block:"",
                 building:"",
                 code:"",//房号
                 floor:"",//楼层
                 buildingSquare:"",//占地面积
                 useSquare:"",//使用面积
                 rentFee:"",//租金
                 state:"",//使用状态
                 remark:"",//备注
                 enabledMark:""//1代表添加2代表删除
              }
          }
      },
      
      methods: {
            closeSuccess(){
                this.active=0;
                this.success=false;
                this.displayUploadFileDialog=true;
            },

            beforeFileUpload(file) {
                // 在此处添加文件的前端验证逻辑，例如文件类型、大小等
                return true; // 如果通过验证，返回 true
            },
            onFileUploadSuccess(response, file, fileList) {
                // 处理文件上传成功后的响应
                console.log('上传成功', response);
            },
            handleExcel(file) {
                if(this.active==0)
                this.active++;
                var formData = new FormData();
                formData.append("file", file.file);
                this.formData=formData;
            },
          //导入文件按钮
          fileDialog(){
            this.active=0;
            this.fileDialogVisible=true;
          },
          cancel(){
            this.fileDialogVisible=false;
          } ,
          next() {
            if (this.active==1)
            {
                this.active=2;
                this.$http.post(
                  "http://localhost:8080/house/uploadFile",
                   this.formData,
                    {
                    headers: {
                    'Content-Type':'multipart/form-data',
                    },
                }
              ).then((result) => {
                this.success=true;
                this.displayUploadFileDialog=false;
              }).catch((err) => {
                  
              });
            }
            
            
         },
         downloadTemplate(){
            alert(1111)
         },
          //查询和搜索商铺
          selectHouse(inputName,inputState,pageNum,pageSize){
              this.$http.get(
                  "http://localhost:8080/house/selectHouse",
                  {
                      params:{
                        name:inputName,
                        state:inputState,
                        pageNum:pageNum,
                        pageSize:pageSize,
                      }
                  }
                  
              ).then((result) => {
                  var $data=result.data;
                  this.tableData=$data.data.list;
                  console.log(this.tableData)
                  this.total = $data.data.total;
                  this.pageNum=$data.data.pageNum;
                  this.pageSize=$data.data.pageSize;
                  
              }).catch((err) => {
              });
          },
          //删除楼道
          deleteHouse(event,index) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              this.$http.post(
                  "http://localhost:8080/house/deleteHouse",
                  {
                     id:this.tableData[index].id
                  }
              ).then((result) => {
                  // alert("删除成功")
                  this.selectHouse(this.inputName,this.inputState,this.pageNum,this.pageSize);
                  //使el-button失去焦点
                  event.target.blur();
                  if(event.target.nodeName == "SPAN") {
                      event.target.parentNode.blur();
                  }
              }).catch((err) => {
                  
              });
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
            //使el-button失去焦点
            event.target.blur();
            if(event.target.nodeName == "SPAN") {
                  event.target.parentNode.blur();
             }       
          });
      },
          //新增商铺按钮
          addHouse(){
              this.form.enabledMark=1;
              this.dialogFormVisible=true;
              this.updateHouseTitle="新增商铺";
              this.blockAndBuilding=[];
              this.form.code="";
              this.form.floor="";
              this.form.buildingSquare="";
              this.form.useSquare="";
              this.form.rentFee="";
              this.form.state="";
              this.form.remark="";
          },
          //编辑商铺按钮
          updateHouse(row,index){
            this.form.id=this.tableData[index].id;
            this.form.remark=this.tableData[index].remark;
            console.log(this.form.id);
            this.blockAndBuilding=[];
            this.blockAndBuildingUpdate="";
            for(let i=0;i<this.listBlocks.length;i++){
                if(this.listBlocks[i].name==row.block){
                    this.blockAndBuilding[0]=this.listBlocks[i].code;
                    break;
                }
            }
            for(let i=0;i<this.listBuildings.length;i++){
                if(this.listBuildings[i].name==row.building){
                    this.blockAndBuilding[1]=this.listBuildings[i].id;
                    break;
                }
            }
            if(row.block!=null){
                this.blockAndBuildingUpdate+=row.block;
            }
            if(row.building!=null){
                this.blockAndBuildingUpdate+="/"+row.building;
            }
              this.form.enabledMark=2;
              this.dialogFormVisible=true;
              this.updateHouseTitle="修改商铺"
              this.form.code=row.code;
              this.form.floor=row.floor;
              this.form.buildingSquare=row.buildingSquare;
              this.form.useSquare=row.useSquare;
              this.form.rentFee=row.rentFee;
              this.form.state=row.state;
          },
          //提交添加/修改
          submitForm(){
            //获取楼栋对应的编号
            for(let i=0;i<this.listBuildings.length;i++){
                if(this.listBuildings[i].id==this.blockAndBuilding[1]){
                    this.form.number=this.listBuildings[i].number;
                    break;
                }
            }
              this.dialogFormVisible=false;
                  this.$http.post(
                      "http://localhost:8080/house/updateHouse",
                      {
                          id:this.form.id,//商铺id
                          code:this.form.code,//商铺房号
                          name:this.form.number,//后端实体类name接收的
                          block:this.blockAndBuilding[0],//商铺所属商业街的code
                          building:this.blockAndBuilding[1],//商铺所属的楼栋id
                          floor:this.form.floor,
                          state:this.form.state,
                          buildingSquare:this.form.buildingSquare,
                          useSquare:this.form.useSquare,
                          rentFee:this.form.rentFee,
                          remark:this.form.remark,
                          enabledMark:this.form.enabledMark
                      }
                  ).then((result) => {
                    this.selectHouse(this.inputName,this.inputState,this.pageNum,this.pageSize);
                  }).catch((err) => {
                  });
          },
          //当前页按钮
          handleCurrentChange(val){
            this.selectHouse(this.inputName,this.inputState,val,this.pageSize);
          },
          //分页按钮
          handleSizeChange(val){
            this.selectHouse(this.inputName,this.inputState,this.pageNum,val);
          },
          //查询按钮
          search(){
              this.pageNum=1;
              this.selectHouse(this.inputName,this.inputState,this.pageNum,this.pageSize);
          },
          //重置按钮(将编号和名称清空的同时再重新获取数据)
          reset(){
              this.pageNum="";
              this.pageSize="";
              this.inputName="";
              this.inputState="";
              this.selectHouse(this.inputName,this.inputState,this.pageNum,this.pageSize);
          },
         //刷新按钮,重新加载一遍数据即可
         refresh(){
            this.selectHouse(this.inputName,this.inputState,this.pageNum,this.pageSize);
         },
         //查询街道
         selectHouseBlock(){
              this.$http.get(
                  "http://localhost:8080/houseBlock/selectHouseBlock",
                  {
                      params:{
                          pageNum:1,
                          pageSize:9999,
                          downTownNum:"",
                          downTownName:""
                      }
                  }
                  
              ).then((result) => {
                  var $data=result.data;
                  this.listBlocks=$data.data.list;
                  console.log(this.listBlocks)
              }).catch((err) => {
              });
          },
          //查询和搜索楼栋
      selectBuilding(){
            this.$http.get(
                "http://localhost:8080/building/selectBuilding",
                {
                    params:{
                      pageNum:1,
                      pageSize:9999,
                    }
                }
                
            ).then((result) => {
                var $data=result.data;
                this.listBuildings=$data.data.list;
                //获取整合好的集合
                for(let i=0;i<this.listBlocks.length;i++){
                    var  map={};
                    map['label']=this.listBlocks[i].name;
                    map['value']=this.listBlocks[i].code;
                    var list1=[];
                        for(let j=0;j<this.listBuildings.length;j++){
                            var map1={};
                            if(map.label==this.listBuildings[j].block){
                                map1['label']=this.listBuildings[j].name;
                                map1['value']=this.listBuildings[j].id;
                                list1.push(map1)
                            }
                        }
                    map.children=list1;
                    this.options.push(map)
                 }
                this.total = $data.data.total;
                this.pageNum=$data.data.pageNum;
                this.pageSize=$data.data.pageSize;
                
            }).catch((err) => {
            });
        },
      },
      
      
      beforeMount() {
          this.selectHouseBlock();
          this.selectBuilding();
          this.selectHouse(this.inputName,this.inputState,this.pageNum,this.pageSize);
      },
     
  }
  </script>
  
  <style>
  .el-upload .el-upload-dragger {

    width: 100%;
    height: 100px;
}

    .el-cascader__inner::placeholder {
        color: red !important; /* 设置颜色为红色 */
        font-size: 16px !important; /* 设置字体大小为16px */
    }
      .blockAndBuildingClass{
        margin-left: 103px;
      }
      .downtownNumClass{
          width: 200px;
      }
      .downtownNameClass{
          width: 200px;
      }
      .searchClass{
          margin-left: 50px;
      }
      .addButtonClass{
          margin-top: 20px;
      }
      #resetId{
          margin-left: 30px;
      }
      .table-div{
          margin-top: 10px;
      }
      .tableClass{
          position: relative;
      }
      .pageHepler{
          position: absolute;
          bottom: 0;
          right: 0;
      }
      #addId{
          margin-top: 5px;
      }
      #refreshId{
          float: right;
          margin-top: 5px;
          margin-right: 8px;
      }
      /* 自定义样式以设置 label 字体加粗 */
      .el-form-item__label {
          margin-left: 100px;
          font-weight: bold;
          font-size: 20px; 
      }
      .custom-dialog .el-dialog__header {
          font-size: 40px; /* 设置标题字体大小 */
      }
    
      .selectCls .el-scrollbar {
         max-height: 200px;
      }
    
  </style>